<template>
  <div class="search-bar">
    <div class="location-selector" @click="showLocationPicker">
      <span class="location-text">{{ currentLocation }}</span>
      <img src="@/assets/imgs/arrow_down_3.png" alt="下拉" class="arrow-icon" />
    </div>
    
    <div class="search-input-wrapper">
      <img src="@/assets/imgs/search.svg" alt="搜索" class="search-icon" />
      <input 
        v-model="searchText"
        type="text" 
        placeholder="公寓/地铁/小区，马上搜索"
        class="search-input"
        @focus="onInputFocus"
        @blur="onInputBlur"
      />
    </div>
    
    <div class="scan-icon" @click="openScanner">
      <el-icon :size="24" color="#666">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path d="M128 192h192V128H128C92.7 128 64 156.7 64 192v192h64V192zm704-64H640v64h192v192h64V192c0-35.3-28.7-64-64-64zM832 640h64v192c0 35.3-28.7 64-64 64H640v-64h192V640zM128 832h192v64H128c-35.3 0-64-28.7-64-64V640h64v192zm96-416h64v192h-64V416zm128 0h64v192h-64V416zm128 0h64v192h-64V416zm128 0h64v192h-64V416zm128 0h64v192h-64V416zm128 0h64v192h-64V416z"/>
        </svg>
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const currentLocation = ref('北京')
const searchText = ref('')

const showLocationPicker = () => {
  ElMessage.info('选择城市功能开发中...')
}

const onInputFocus = () => {
  console.log('搜索框获得焦点')
}

const onInputBlur = () => {
  console.log('搜索框失去焦点')
}

const openScanner = () => {
  ElMessage.info('扫码功能开发中...')
}
</script>

<style scoped>
.search-bar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: transparent;
  position: relative;
  z-index: 100;
}

.location-selector {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 12px;
  min-width: 60px;
}

.location-text {
  font-size: 16px;
  color: #333;
  margin-right: 4px;
  font-weight: 500;
}

.arrow-icon {
  width: 16px;
  height: 16px;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  padding: 8px 16px;
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.search-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

.scan-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 50%;
}

.scan-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
</style>
